import { Panel, FormModal, ImgHolder } from 'comps/common';
import { Form, Input, Button, Table, Icon } from 'antd';
import * as React from 'react';
import CompanyForm from '../containers/company-form';

const FormItem = Form.Item;

class CompanySearchForm extends React.Component {
  onSubmit(evt) {
    evt.preventDefault();
    this.props.onCompanySearch(this.props.form.getFieldsValue());
  }

  render() {
    const getFieldProps = this.props.form.getFieldProps;

    return (
      <Form className='search-form' inline onSubmit={::this.onSubmit}>
        <FormItem label='企业名称：'>
          <Input style={{ width: '300px' }} placeholder='输入企业名称检索' {...getFieldProps('name')}/>
        </FormItem>
        <Button htmlType='submit' type='primary'><Icon type='search'/>搜索</Button>
      </Form>
    );
  }
}
CompanySearchForm = Form.create()(CompanySearchForm);

class CompanyManageList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1,
      editingCompany: {}
    };
  }

  showCompanyModal(company) {
    this.setState({ editingCompany: company });
    this.refs.formModal.show();
  }

  afterCompanySubmit() {
    const query = {
      ...this.refs.searchForm.getFieldsValue(),
      pageNo: this.state.currentPage
    };
    this.props.onCompanySearch(query);
  }

  render() {
    const { companies = {}, onCompanySearch } = this.props;
    const { list = [], total } = companies;

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      }, {
        title: '公司',
        key: 'name',
        render(t, record) {
          return (
            <span>
              <ImgHolder className='company-logo' src={record.logo} rect='40x40' random='yes' text={record.name.substring(0, 1)}/>
              {record.name}
            </span>
          );
        }
      }, {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
        render(type) {
          return {
            CUSTOMER: '客户企业',
            ISV: 'ISV',
            BOTH: '客户企业 & ISV'
          }[type];
        }
      }, {
        title: '描述',
        dataIndex: 'desc',
        key: 'desc'
      }, {
        title: '操作',
        key: 'operator',
        render: (t, record) => {
          return (
            <span>
              <Button onClick={() => this.showCompanyModal(record)}>编辑</Button>
            </span>
          );
        }
      }
    ];

    const pagination = {
      total,
      current: this.state.currentPage,
      onChange: (pageNo) => {
        const query = {
          ...this.refs.searchForm.getFieldsValue(),
          pageNo
        };
        this.props.onCompanySearch(query)
          .then(() => {
            this.setState({ currentPage: pageNo });
          });
      }
    };

    return (
      <Panel className='company-manage-list'>
        <CompanySearchForm ref='searchForm' onCompanySearch={onCompanySearch}/>
        <Button type='primary' style={{ marginBottom: '20px' }}
          onClick={() => this.showCompanyModal({})}
        >
          <Icon type='team'/>新建企业
        </Button>
        <Table dataSource={list} columns={columns} pagination={pagination} rowKey={it => it.id}/>
        <FormModal ref='formModal' form={CompanyForm} formProps={{ company: this.state.editingCompany, afterSubmit: ::this.afterCompanySubmit }}/>
      </Panel>
    );
  }
}

export default CompanyManageList;
